import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter)

// 导入一级路由组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
import _404 from './views/404.vue'
// 导入二级路由组件
import Recommend from './views/Recommend.vue'
import Ranking from './views/Ranking.vue'
import SongList from './views/SongList.vue'


const routes = [
  {
    path: '/',
    redirect: '/find',
  }, {
    path: '/find',
    component: Find,
    // 进入/find，重定向到推荐，展示默认的二级路由，防止二级内容为空
    redirect: '/find/recommend',
    // 配置路由嵌套核心的2个步骤：
    // 1. 配children
    // 2. 给出口<router-view/>
    children: [
      {
        path: 'recommend',
        component: Recommend
      }, {
        path: 'ranking',
        component: Ranking
      }, {
        path: 'songlist',
        component: SongList
      }
    ]
  }, {
    path: '/my',
    component: My
  }, {
    path: '/friend/:fid/:fage',
    name: 'PY',
    component: Friend
  }, {// 404配置
    path: '*',
    component: _404
  },
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

// 路由的全局前置守卫
// 任何路由在跳转前必须经过这个函数的处理
// 需求：我的音乐页，需要登录才能访问，否则给出提示
const isLogin = true
router.beforeEach((to, from, next) => {
  // console.log(to)// 到哪去
  // console.log(from)// 从哪来
  // console.log(next)// 关键，是个函数，只有调用了next()路由才能放行，否则页面是白板
  if (to.path === '/my' && !isLogin) {
    alert('哥们，请先登录')
    next(false)// 停留在原地，不发生跳转
  } else {
    next()// 正常放行
  }
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
